<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="baiduTemplate.js"></script>
</head>
<body>
<div class="wrap">
	<div class="anniu">
		<button id="btn1">添加数据</button>
		<button id="btn2">刷新</button>
	</div>
	<div class="user">
		<img src="images/user.png" style="width:50px;
		height:40px;">
		<img src="images/cart_up.png" style="width:30px;height:30px;margin-left:30px;" id="hit">
		<div class="smallbox"></div>
	</div>
	<div class="box" id="boxs">
		<ul id="add">
			<li><input type="checkbox"></li>
			<li>图片</li>
			<li>书名</li>
			<li>作者</li>
			<li>会员价</li>
			<li>出版社</li>
			<li>操作</li>
		</ul>
		<table id="tab">
			
		</table>
	</div>

	<div class="small" >
		<table>
		<tr>
				<td>图片</td>
				<td><input type="text" value="" id="images"></td>
			</tr>
			<tr>
				<td>书名</td>
				<td><input type="text" value="" id="name"></td>
			</tr>
			<tr>
				<td>作者</td>
				<td><input type="text" value="" id="author" ></td>
			</tr>
			<tr>
				<td>会员价</td>
				<td><input type="text" value="" id="huiyuan"></td>
			</tr>
			<tr>
				<td>出版社</td>
				<td><input type="text" value="" id="chuban" ></td>
			</tr>

		</table>
			<button id="btn3">添加</button>
	</div>
</div>
<div id="div1"></div>
</body>
<script type="text/javascript"src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">

	var btn = document.querySelectorAll("button");
	var small = document.querySelector(".small");
	var box = document.querySelector(".box");
	var smallbox = document.querySelector(".smallbox");
	console.log(small);
	var bol = false;
	hit.onclick = function(){
			smallbox.style.display = "none";
		if (!bol) {
			bol = true;
			smallbox.style.display = "block";
		};
	};

	//点击按钮实现添加效果
	btn1.onclick = function(){
		small.style.display="block";
	}
	

	btn3.onclick = function(data){
		small.style.display="none";
		$.get("http://localhost:2403/books",function(data){
		console.log(data);
		})
	var images= $("#images").val();
	var haha=$("#name").val();
	var author=$("#author").val();
	var huiyuan=$("#huiyuan").val();
	var chuban=$("#chuban").val();
	var books = {
		pic:images,
		name:haha,
		author:author,
		huiyuan:huiyuan,
		chubanshe:chuban
	}
	$.post("http://localhost:2403/books",books,function(data){
		console.log(data);
	})
	 images= $("#images").val("");
	 haha=$("#name").val("");
	 author=$("#author").val("");
	 huiyuan=$("#huiyuan").val("");
	 chuban=$("#chuban").val("");
	}

	//刷新
	btn2.onclick = function(){

	$.get("http://localhost:2403/books",function(data){
		console.log(data);

		for(var j in data){
		var boxs=$("<tr><td><input type='checkbox'></td><td><img src='"+data[j].pic+"'/></td><td>"+data[j].name+"</td><td>"+data[j].author+"</td><td>"+data[j].huiyuan+"</td><td>"+data[j].chubanshe+"</td><td id='#yb'><button class='del'>删除</button><button>修改</button></td></tr>");
		boxs.appendTo($("#tab"));
		// 删除按钮实现功能
			var arr = []
			$(".del").click(function(){
				$(this).parents("tr").remove();
				console.log(1111111);
			})
			for (var i = 0; i < arr.length; i++) {
					// 克隆节点   同时克隆事件了。
					var newTr = $("#yb").clone(true).removeAttr("id").appendTo($("tab"));
					.removeAttr("id").appendTo($("tab"));
						console.log( newTr );
					newTr.children(":eq(0)").html( arr [i]);
					}
				}

		})
	}
</script>
</html>